<template>
  <div class="chat-search">
    <div class="chat-search-input">
      <input />
      <n-icon class="icon-wrapper"><Search></Search></n-icon>
    </div>
    <div class="chat-search-user-list">
      <div class="chat-search-user">
        <div class="search-user-avatar">
          <img :src="avatarImg" />
        </div>
        <div class="search-user-name">rh002</div>
      </div>
    </div>
  </div>
  <div class="user-wrapper">
    <div class="center">
      <div class="avatar">
        <img :src="avatarImg" alt="" />
      </div>
      <div class="name">RH002</div>
      <div class="button" :style="{ backgroundImage: `url('${buttonImg}')` }">
        发消息
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, shallowRef } from "vue";
import avatarImg from "../../assets/chat-board/avatar.png";
import buttonImg from "../../assets/chat-board/button.png";
</script>

<style lang="scss" scoped>
.user-wrapper {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  .avatar {
    img {
      width: 60px;
      height: 60px;
    }
  }
  .name {
    text-align: center;
  }
  .button {
    display: flex;
    justify-content: center;
    background-size: 100% 100%;
    cursor: pointer;
  }
  .button:hover {
    color: #aaa;
  }
  .button:active {
    color: grey;
  }
}
.info-content {
  height: 220px;
}
.info-tool-bar {
  height: 40px;
  border-top: 1px solid rgba(8, 92, 154);
  border-bottom: 1px solid rgba(8, 92, 154);
  display: flex;
  align-items: center;
  padding: 0 15px;
  .info-tool-item {
    margin: 0 6px;
    margin-top: 8px;
    cursor: pointer;
    img {
      width: 25px;
      height: 25px;
      object-fit: contain;
    }
  }
}
.info-text-area {
  textarea {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    padding: 12px;
    box-sizing: border-box;
  }
}
.chat-search {
  height: 425px;
  width: 200px;
  border-right: 2px solid rgba(8, 92, 154);
  .chat-search-input {
    // border-bottom: 2px solid rgba(8, 92, 154);
    display: flex;
    input {
      flex: 1;
      height: 30px;
      background: none;
      border: none;
      outline: none;
      background-color: rgba(0, 0, 0, 0.3);
      color: #fff;
      text-indent: 0.5em;
    }
    .icon-wrapper {
      background-color: rgba(6, 93, 155, 1);
      height: 30px;
      width: 30px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
    .icon-wrapper:hover {
      color: #aaa;
    }
    .icon-wrapper:active {
      color: grey;
    }
  }
  .chat-search-user-list {
    .chat-search-user {
      padding: 5px;
      background-color: rgba(21, 54, 81, 0.6);
      display: flex;
      align-items: center;
      cursor: pointer;
      .search-user-name {
        margin-left: 1em;
      }
    }
  }
}
</style>
